<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>博客赠书抽奖</title>
    <!-- Import styles -->
    <link href="https://cdn.bootcdn.net/ajax/libs/element-plus/2.3.3/index.css" rel="stylesheet">
    <!-- Import Vue 3 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.47/vue.global.js"></script>
    <!-- Import axios -->
    <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
    <!-- 引入element plus -->
    <script src="https://cdn.bootcdn.net/ajax/libs/element-plus/2.3.3/index.full.min.js"></script>
</head>
<body>

<div id="app">
    <h1>查询博客质量</h1>
    <el-row class="mb-4">
        抽奖博客地址：<el-input
                placeholder="请输入CSDN博客地址"
                v-model="blogUrl"
                style="width:700px;"
                clearable>
        </el-input>
    </el-row>
    <el-row class="mb-4">
        过滤账号：<el-input v-model="exUser" style="width:200px;" clearable ></el-input>
    </el-row>
    <el-row class="mb-4">
        <el-button type="primary" @click="qc">获取抽奖账号</el-button>
    </el-row>

    <!-- 抽奖池  -->
    <div style="text-align: center;margin: 10px 2px 20px 2px">
        <h1>抽奖池用户名单</h1>
        <div style="margin: 20px 0 ; color: #6a737d">
            <h3>为博客赠书，提供专业抽奖服务</h3>
        </div>

        <!-- 用户列表 内容区域 -->
        <div style=" font-family: 'Times New Roman', serif; font-size: 16px; font-style: italic; color: deeppink; ">
            <grid-layout
                    :layout.sync="layout"
                    :col-num="12"
                    :row-height="30"
                    :is-draggable="true"
                    :is-resizable="true"
                    :is-mirrored="false"
                    :vertical-compact="true"
                    :margin="[10, 10]"
                    :use-css-transforms="true"
            >

                <grid-item v-for="item in userInfoDataList"
                           :w="200"
                           :h="80"
                           :key="item.userName">
                    {{item.nickName}}（{{item.userName}}） &nbsp;&nbsp;&nbsp;&nbsp;

                </grid-item>
            </grid-layout>
        </div>


        <div v-show="userInfoDataList.length>0">
            <el-row class="mb-4">
                <el-button type="primary" @click="draw">抽奖</el-button>
                <span v-show="awardList.length > 0" style="margin-left: 20px;"> 已抽奖次数： {{ awardList.length }} </span>
            </el-row>
            <el-row class="mb-4">
                获奖名单:
                {{ awardList.join(", ") }}
            </el-row>
        </div>


    </div>

</div>

<script>
    const App = {
        data(){
            return{
                userInfoDataList: [],
                blogUrl: "https://blog.csdn.net/s445320/article/details/133265834",
                exUser: "青花锁",
                awardList: [],
                loading: false
            }
        },mounted(){
        },
        methods:{
            invokeUserInfoDataList(){
                //axios调用后台get方法
                // axios.get("http://139.159.230.49/csdn/qc/name?username=" + this.csdnId + "&currentPage=" + this.currentPage )
                axios.get("http://139.159.230.49/csdn/draw/url?url=" + this.blogUrl  )
                    .then(response =>{
                        //对返回结果进行处理
                        var data = response.data;
                        if( data.code == 200 ) {
                            this.userInfoDataList = data.data.filter(value => value.nickName != this.exUser);
                            this.loading = false;
                        }
                        console.log(this.userInfoDataList);
                    }).catch(function(error){
                    //异常处理
                    console.log(error);
                })
            } ,
            qc() {
                this.loading = true;
                this.invokeUserInfoDataList();
            },
            draw() {
                var randomNum = Math.floor(Math.random() * this.userInfoDataList.length ) ;
                var userInfo = this.userInfoDataList[randomNum];

                this.userInfoDataList = this.userInfoDataList.filter(value => value.nickName != userInfo.nickName);

                this.awardList.push(userInfo.nickName);
            }
        }

    }

    const App2 = Vue.createApp(App)
    App2.use(ElementPlus)
    App2.mount(app)
</script>
</body>
</html>